<template>
  <div class="click-effect-container">
    <slot></slot>
    <div
      v-if="showEffect"
      ref="effectRef"
      class="click-effect"
      :style="{
        left: `${position.x}px`,
        top: `${position.y}px`,
        backgroundColor: color,
        width: `${size}px`,
        height: `${size}px`
      }"
    ></div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 定义props
const props = defineProps({
  // 点击特效的颜色
  color: {
    type: String,
    default: 'rgba(66, 185, 131, 0.6)'
  },
  // 点击特效的大小
  size: {
    type: Number,
    default: 80
  },
  // 点击特效的持续时间（毫秒）
  duration: {
    type: Number,
    default: 800
  }
});

// 定义emits
const emit = defineEmits(['click']);

// 状态管理
const showEffect = ref(false);
const position = ref({ x: 0, y: 0 });
const effectRef = ref(null);

// 处理点击事件
const handleClick = (event) => {
  // 阻止事件冒泡
  event.stopPropagation();
  
  // 计算点击位置相对于容器的坐标
  const containerRect = event.currentTarget.getBoundingClientRect();
  position.value = {
    x: event.clientX - containerRect.left - props.size / 2,
    y: event.clientY - containerRect.top - props.size / 2
  };
  
  // 显示点击特效
  showEffect.value = true;
  
  // 触发外部点击事件
  emit('click', event);
  
  // 设置动画结束后的清理
  setTimeout(() => {
    showEffect.value = false;
  }, props.duration);
};

// 暴露handleClick方法给父组件
defineExpose({
  handleClick
});
</script>

<style scoped>
.click-effect-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.click-effect {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: clickEffectAnimation var(--duration, 0.8s) ease-out forwards;
  transform-origin: center;
  opacity: 0;
  z-index: 1000;
}

@keyframes clickEffectAnimation {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  70% {
    transform: scale(2);
    opacity: 0.4;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
</style>